<template>
	<view class="yuDing">
		<view class="yuDing-address">
			<view class="yuDing-address-cen flex" @click="cli_goAddList">
				<image class="yuDing-address-cen-img1" src="https://www.zzzsyh.com/applets/agent/agent/address.png" mode=""></image>
				<view class="yuDing-address-cen-left" v-if="addressAll.addressPhone">
					<view class="yuDing-address-cen-left-ok flex">
						<text class="yuDing-address-cen-left-ok-ok1"> 收货人：</text>
						<text class="yuDing-address-cen-left-ok-ok2">
							{{addressAll.addressName}} {{addressAll.addressPhone}}
						</text>
					</view>
					<view class="yuDing-address-cen-left-ok flexno">
						<text class="yuDing-address-cen-left-ok-ok1"> 收货地址：</text>
						<text
							class="yuDing-address-cen-left-ok-ok3">{{addressAll.addressPrivinceName}}{{addressAll.addressCityName}}{{addressAll.addressDistrictName}}{{addressAll.addressDetail}}</text>
					</view>
				</view>
				<view class="yuDing-address-cen-left flex" v-else>
					<text class="yuDing-address-cen-txt font_blod">请选择收货地址</text>
				</view>
				<image class="yuDing-address-cen-img2" src="https://www.zzzsyh.com/applets/agent/agent/right-two.png" mode=""></image>
			</view>
		</view>
		<view class="yuDing-company">
			<view class="yuDing-company-top">

			</view>
			<view class="yuDing-company-back">
				<view class="yuDing-company-content">
					<view class="yuDing-company-content-left flex">
						<image class="yuDing-company-content-left-img1" src="https://www.zzzsyh.com/applets/agent/agent/house-two.png" mode="">
						</image>
						<text class="yuDing-company-content-left-txt font_blod">{{factoryName}}</text>
						<!-- <image class="yuDing-company-content-left-img2" src="https://www.zzzsyh.com/applets/agent/agent/right-three.png"
							mode=""></image> -->
					</view>
					<!-- <view class="yuDing-company-content-phone" @click="cli_phone(factoryPhone)">
						<image class="yuDing-company-content-phone-img" src="https://www.zzzsyh.com/applets/agent/agent/phone-two.png" mode="">
						</image>
					</view> -->
				</view>
			</view>
		</view>
		<view class="yuDing-list">
			<view class="yuDing-list-box" v-if="list.length > 0">
				<view class="yuDing-list-li-back" v-for="(item, index) of list" :key="index">
					<view class="yuDing-list-li">
						<view class="yuDing-list-li-con">
							<view class="yuDing-list-li-left">
								<image class="yuDing-list-li-img" @click="previewImage(item.attributeLogo, index)" :src=item.attributeLogo mode=""></image>
							</view>
							<view class="yuDing-list-li-right">
								<view class="yuDing-list-li-right-1 font_blod">
									{{item.attributeName}}
								</view>
								<view class="yuDing-list-li-right-2">
									<text class="yuDing-list-li-right-2-txt" v-if="item.isPost == 1">包邮 偏远地区补差价</text>
									<text class="baoyou-no" v-else>不包邮</text>
								</view>
								<view class="yuDing-list-li-right-3">
									<text class="yuDing-list-li-right-3-txt1">￥</text>
									<text class="yuDing-list-li-right-3-txt2 font_blod">{{item.attributeSalePrice}}</text>
									<text class="yuDing-list-li-right-3-txt3">/{{item.partsUnit}}</text>
								</view>
								<view class="yuDing-list-li-right-4">
									<view class="yuDing-list-li-right-4-left">
										预定数量:
									</view>
									<view class="yuDing-list-li-right-4-right flex">
										<input class="yuDing-list-li-right-4-right-input" @input="input_all"
											v-model="item.count" type="number" value="" placeholder-class="inputplace" placeholder="请输入数量" />
										<text class="yuDing-list-li-right-4-right-txt">{{item.partsUnit}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="yuDing-list-li-confirm" v-if="item.attributeRemarks">
							{{item.attributeRemarks}}
						</view>
					</view>
				</view>
			</view>
			<view class="" v-else style="margin-top: 20%;">
				<view class="yPopNone">
					<image class="yPopNoneImg" src="https://www.zzzsyh.com/applets/agent/factory/23.png" mode="">
					</image>
					<view class="yPopNoneTxt">
						暂无产品~
					</view>
				</view>
			</view>
		</view>

		<view class="yuDing-btn">
			<view class="yuDing-btn-cen flex">
				<image class="yuDing-btn-cen-img1" src="https://www.zzzsyh.com/applets/agent/agent/yuDing-1.png" mode=""></image>
				<view class="yuDing-btn-cen-con">
					<view class="yuDing-btn-cen-con-top">
						<text class="yuDing-btn-cen-con-txt1">合计:</text>
						<view class="yuDing-btn-cen-con-txt2 font_blod">
							<text style="font-size: 28rpx;">￥</text>
							<text>{{all_money}}</text>
						</view>
						
					</view>
					<view class="yuDing-btn-cen-con-btm">
						共 {{all_num}} 个商品
					</view>
				</view>
				<view class="yuDing-btn-cen-btn font_blod" @click="cli_put">
					提交订单
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="YJWupSuccess">
				<image class="YJWupSuccessImg" src="https://www.zzzsyh.com/applets/agent/agent/jiedan_success.png" mode=""></image>
				<view class="YJWupSuccessTitle">
					预订成功
				</view>
				<view class="YJWupSuccessContent">
					<!-- 正在审核中，请耐心等待… -->
				</view>
				<view class="YJWupSuccessBtn" @click="cli_now">
					我知道了
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import allapi from '../api/index.js'
	import {
		eventBus
	} from '../../main.js'
	export default {
		data() {
			return {
				agentId: uni.getStorageSync('agentId'),
				factoryId: uni.getStorageSync('factoryId'),
				factoryName: '',
				factoryPhone: '',
				// factoryName: uni.getStorageSync('factoryName'),
				// factoryPhone: uni.getStorageSync('factoryPhone'),
				addressName: '',
				addressPhone: '',
				addressId: '',
				addressAll: {
					addressName: '',
					addressPhone: '',
					addressPrivinceName: '',
					addressCityName: '',
					addressDistrictName: '',
					addressDetail: ''
				}, // 获取的所有的地址信息
				partsId: '',
				id_address: '', // 地址id
				list: [],
				all_money: '0', // 合计金额
				all_num: '0', // 合计数量
			}
		},
		onLoad(msg) {
			// if (msg.id_address) {
			// 	this.id_address = msg.id_address
			// }else {
			// 	this.id_address = ''
			// }
			if (msg.id) {
				this.partsId = msg.id
			}
		},
		onShow() {
			eventBus.$on('id_address', (message) => {
				this.id_address = message
			})
			if (this.id_address) {
				this.getAgentAddressById()
			} else {
				this.getAgentDefaultAddress()
			}
		},
		mounted() {
			this.getPartsAttributeByFactoryId()
		},
		methods: {
			// 图片预览
			previewImage(item, index){
				console.log(item);
				let lis = item.split()
				wx.previewImage({
				  current: 0, // 当前显示图片的http链接
				  urls: lis // 需要预览的图片http链接列表
				})
			},
			// 拨打电话
			cli_phone(val) {
				uni.makePhoneCall({
					phoneNumber: val //仅为示例
				});
			},
			// 跳转到地址页
			cli_goAddList() {
				uni.navigateTo({
					url: '/pages/addList/addList'
				});
			},
			// 输入的时候改变价格数量
			input_all() {
				let list = this.list
				let val = list.filter(item => {
					if (item.count) {
						return item
					}
				})
				let num = val.length
				let money = 0
				for (let i = 0; i < val.length; i++) {
					let aa = this.NumberMul(val[i].attributeSalePrice, val[i].count)
					money = this.NumberAdd(money, aa)
				}
				this.all_num = num
				this.all_money = money
			},
			// 提交预订单
			cli_put() {
				let list = this.list
				let putList
				let val = list.filter(item => {
					if (item.count) {
						return item
					}
				})
				if (val.length > 0) {
					putList = val.map(item => {
						console.log(item);
						return {
							partsId: item.partsId,
							attributeId: item.id,
							count: item.count,
							price: item.attributeSalePrice,
						}
					})
					console.log(putList);
					this.submitReservation(putList)
				} else {
					uni.showToast({
						title: '请先输入需要预定产品的数量',
						icon: 'none'
					})
				}
				// console.log(val);

			},
			submitReservation(partsJson) {
				uni.request({
					url: allapi.submitReservation,
					data: {
						addressId: this.addressAll.id,
						factoryId: this.factoryId,
						partsJson: partsJson
					},
					success: (res) => {
						console.log(res);
						this.$refs.popup.open()
					}
				})
			},
			// 点击关闭预订成功弹窗
			cli_now () {
				this.$refs.popup.close()
				uni.switchTab({
					url: '/pages/inventory/inventory'
				});
			},
			// 获取列表
			getPartsAttributeByFactoryId() {
				uni.request({
					url: allapi.getPartsAttributeByFactoryId,
					data: {
						factoryId: this.factoryId,
						partsId: this.partsId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.factoryName = dat.factoryName
						this.factoryPhone = dat.factoryPhone
						this.list = dat.attributeList
					}
				})
			},
			// 根据id获取地址
			getAgentAddressById() {
				uni.request({
					url: allapi.getAgentAddressById,
					data: {
						id: this.id_address
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.addressAll = dat
					}
				})
			},
			// 获取默认收货地址
			getAgentDefaultAddress() {
				uni.request({
					url: allapi.getAgentDefaultAddress,
					data: {
						agentId: this.agentId
					},
					success: (res) => {
						console.log(res);
						let dat = res.data.data
						this.addressAll = dat
					}
				})
			},
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
	}

	.flexno {
		display: flex;
	}

	.yuDing {
		position: absolute;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.yuDing-address {
		/* height: 168rpx; */
		background: #28CD50;
		padding-bottom: 30rpx;
	}

	.yuDing-address-cen {
		margin: 0 24rpx;
		min-height: 136rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(51, 51, 51, 0.12);
		border-radius: 16rpx;
		justify-content: space-between;
		padding: 0 24rpx;
	}

	.yuDing-address-cen-left {
		/* height: 40rpx;
		line-height: 40rpx; */
		height: 100%;
		flex: 1;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.yuDing-address-cen-left-ok {
		margin: 8rpx 0;
	}

	.yuDing-address-cen-left-ok-ok1 {
		font-size: 24rpx;
		color: #999999;
		width: 120rpx;
	}

	.yuDing-address-cen-left-ok-ok2 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.yuDing-address-cen-left-ok-ok3 {
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
		flex: 1;
	}

	.yuDing-address-cen-img1 {
		width: 40rpx;
		height: 40rpx;
	}

	.yuDing-address-cen-img2 {
		width: 32rpx;
		height: 32rpx;
	}

	.yuDing-address-cen-txt {
		font-size: 28rpx;
		color: #999999;

	}

	.yuDing-company {
		background: #28CD50;
		height: 96rpx;
	}

	.yuDing-company-top {
		height: 24rpx;
		background: #1BB13F;
		border-radius: 12rpx;
		margin: 0 4rpx;
	}

	.yuDing-company-back {
		height: 132rpx;
		background-image: url('https://www.zzzsyh.com/applets/agent/agent/12.png');
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0 24rpx;
		margin-top: -12rpx;
	}

	.yuDing-company-content {
		height: 96rpx;
		/* background: #FFFFFF; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 24rpx;
	}

	.yuDing-company-content-left {
		height: 48rpx;
		line-height: 48rpx;
	}

	.yuDing-company-content-left-img1 {
		width: 42rpx;
		height: 42rpx;
	}

	.yuDing-company-content-left-img2 {
		width: 48rpx;
		height: 48rpx;
	}

	.yuDing-company-content-left-txt {
		font-size: 32rpx;
		color: #19852D;
		margin-left: 16rpx;
	}

	.yuDing-company-content-phone {}

	.yuDing-company-content-phone-img {
		width: 72rpx;
		height: 48rpx;
	}

	.yuDing-btn {
		height: 120rpx;
		padding-bottom: 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
	}

	.yuDing-btn-cen {
		margin: 0 16rpx;
		height: 120rpx;
		background: #313131;
		border-radius: 24rpx;
		padding: 0 16rpx;
	}

	.yuDing-btn-cen-img1 {
		width: 74rpx;
		height: 94rpx;
	}

	.yuDing-btn-cen-con {
		flex: 1;
		margin-left: 16rpx;
	}
	.yuDing-btn-cen-con-top {
		display: flex;
		align-items: center;
	}
	.yuDing-btn-cen-con-txt1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.yuDing-btn-cen-con-txt2 {
		margin-left: 8rpx;
		font-size: 36rpx;
		color: #FF9300;
	}

	.yuDing-btn-cen-con-btm {
		font-size: 24rpx;
		font-weight: 400;
		color: #BBBBBB;
	}

	.yuDing-btn-cen-btn {
		width: 168rpx;
		height: 68rpx;
		line-height: 68rpx;
		text-align: center;
		background: linear-gradient(90deg, #2ACE52 0%, #1DC248 100%);
		border-radius: 34rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.yuDing-list {
		flex: 1;
		/* background: red; */
		margin: 0 24rpx;
		margin-top: 48rpx;
		overflow: auto;
	}

	.yuDing-list-box {
		height: 100%;
	}

	.yuDing-list-li-back {
		background: #FFFFFF;
	}

	.yuDing-list-li {
		/* height: 264rpx; */
		/* background: #FFFFFF; */
		border-bottom: 2rpx solid #EEEEEE;
		padding: 36rpx 0 26rpx 0;
		margin-left: 32rpx;
		margin-right: 26rpx;
	}

	.yuDing-list-li-con {
		display: flex;
	}

	.yuDing-list-li-img {
		width: 192rpx;
		height: 192rpx;
		border-radius: 12rpx;
		background: #EEEEEE;
	}

	.yuDing-list-li-left {
		/* margin-left: 32rpx; */
	}

	.yuDing-list-li-right {
		/* margin: 0 26rpx; */
		margin-left: 26rpx;
		flex: 1;
		overflow: hidden;
	}

	.yuDing-list-li-right-1 {
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
	}

	.yuDing-list-li-right-2 {
		height: 36rpx;
		margin-top: 8rpx;
	}

	.yuDing-list-li-right-2-txt {
		/* width: 244rpx; */
		height: 34rpx;
		border-radius: 6rpx;
		border: 2rpx solid #28CD50;
		font-size: 24rpx;
		font-weight: 400;
		color: #28CD50;
		padding: 0 12rpx;
	}
	.baoyou-no {
		height: 34rpx;
		border-radius: 6rpx;
		border: 2rpx solid #EF691C;
		font-size: 24rpx;
		font-weight: 400;
		color: #EF691C;
		padding: 0 12rpx;
	}
	.yuDing-list-li-right-3 {
		height: 50rpx;
		margin-top: 10rpx;
	}

	.yuDing-list-li-right-3-txt1 {
		font-size: 24rpx;
		color: #EF691C;
		font-weight: 400;
	}

	.yuDing-list-li-right-3-txt2 {
		font-size: 36rpx;
		color: #EF691C;
	}

	.yuDing-list-li-right-3-txt3 {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
	}

	.yuDing-list-li-right-4 {
		height: 48rpx;
		margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		align-content: center;
	}

	.yuDing-list-li-right-4-left {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.yuDing-list-li-right-4-right-input {
		width: 124rpx;
		height: 44rpx;
		line-height: 44rpx;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
		text-align: center;
		color: #333333;
		font-size: 28rpx;
	}

	.yuDing-list-li-right-4-right-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #666666;
		margin-left: 12rpx;
	}

	.yuDing-list-li-confirm {
		font-size: 24rpx;
		font-weight: 400;
		color: #F9AE46;
		margin-top: 20rpx;
	}

	/deep/ .inputplace {
		font-size: 20rpx;
		color: #999999;
	}

	.YJWupSuccess {
		width: 416rpx;
		height: 392rpx;
		background: linear-gradient(180deg, #F3E2D4 0%, #FAF4F0 100%);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		padding-top: 0.1rpx;
	}

	.YJWupSuccessImg {
		width: 216rpx;
		height: 156rpx;
		margin-top: 32rpx;
	}

	.YJWupSuccessTitle {

		color: #333333;
		line-height: 44rpx;
		font-size: 32rpx;
	}

	.YJWupSuccessContent {
		line-height: 40rpx;
		color: #C1814E;
		font-weight: 400;
		font-size: 28rpx;
		margin-top: 24rpx;
	}

	.YJWupSuccessBtn {
		width: 272rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #C1814E;
		border-radius: 40rpx;
		text-align: center;
		margin-top: 35rpx;
		color: #F8EEE6;
		font-size: 28rpx;
	}
</style>
